<template>
  <!-- 点餐-蚂蚁上树-筛选 -->
  <div class="select-popup">
      <!-- 头部导航栏 -->
      <order-head :title="title"></order-head>
      <!-- 下拉菜单 -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item title="筛选" ref="item">
          <!-- 配送方式 -->
      <div class="content">
      <div class="content-text">配送方式</div>
        <ul>
          <li>
            <span>蜂鸟专送</span>
          </li>
        </ul>
      </div>
      <!-- 商家属性 -->
      <div class="content">
      <div class="content-text">商家属性（可以多选）</div>
        <ul>
          <li>
            <span>品牌商家</span>
          </li>
          <li>
            <span>品牌商家</span>
          </li>
          <li>
            <span>品牌商家</span>
          </li>
          <li>
            <span>品牌商家</span>
          </li>
          <li>
            <span>品牌商家</span>
          </li>
          <li>
            <span>品牌商家</span>
          </li>
        </ul>
      </div>
      <!-- 按钮 -->
      <div class="btn">
        <button>清空</button>
        <button>确定</button>
      </div>
        </van-dropdown-item>
      </van-dropdown-menu>
      
  </div>
</template>

<script>
import {
  NavBar,
  Toast,
  Popup,
  Cell,
  DropdownMenu,
  DropdownItem,
} from "vant";
import OrderHead from "./OrderHead.vue";
export default {
  name: "PayOnline",
  components: {
    [NavBar.name]: NavBar,
    [Toast.name]: Toast,
    [Popup.name]: Popup,
    [Cell.name]: Cell,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    OrderHead,
  },
  data() {
    return {
      title: "全部筛选",
      show: false,
      radio: "1",
      value1: 0,
      value2: "a",
      value3: "a",
      option1: [
        { text: "美食", value: 0 },
        { text: "好评排序", value: 1 },
        { text: "销量排序", value: 2 },
      ],
      option2: [
        { text: "排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      option3: [
        { text: "筛选", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
.select-popup {
  width: 100%;
  .content {
    margin: 20px auto 10px 10px;
    font-size: 14px;
    .content-text{
      margin-bottom: 10px;
    }
    ul {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      li {
        width: 109px;
        height: 33px;
        border: 1px solid #eeeeee;
        font-size: 12px;
        line-height: 33px;
        margin-bottom: 10px;
        margin: 10px auto 5px 0px;
        border-radius: 5px;
      }
    }
  }
  .btn{
    width: 100%;
    height: 58px;
    background-color:#f1f1f1 ;
    display: flex;
    justify-content: space-around;
    align-items: center;
    button:nth-child(1){
      background-color: white;
      color: black;
    }
    button {
      width:174px;
      height: 40px;
      background-color: #4cd964;
      border-radius: 10px;
      border: none;
      font-size: 20px;
      color: white;
    }
  }
}
</style>